<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file ="../include/base.jsp"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css"  href="<%=basePath %>css/bootstrap.min.css"/>
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:50px;
		}
		.mywell{
			margin-top:25px;
		}
	</style>
</head>
<body class="body">
	<%@ include file = "../include/sametop.jsp" %>
	<div class="container">
		<div class="row">
			<jsp:include page="../include/sameleft.jsp">
				<jsp:param value="contact" name="tag"/>
			</jsp:include>
			<div class="span9"  style="border-radius: 3px 3px 0 0;margin-top:10px">
			
				<div class="wall " style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:0px;border:1px  solid #dddddd">
					<div style="margin-top:20px;">					
							<div class="wall">
							<c:choose>
							<c:when test="${contact.type=='person'}">						
								<form class="form-horizontal" action="<%=basePath%>contact/updateContact.action?id=${contact.id}" method="post">
										<fieldset>
										<div class="row" style="border-radius: 3px 3px 0 0">
												<div class="span1" style="margin-top:30px;margin-left:50px">
													
												</div>					
												 <div class="span1">
													<div style="margin-top:30px;border:1px  solid #dddddd;width:80px;height:100px;margin-left:20px">
														<img  src="<%=basePath %>img/2.jpg" style="width:80px;height:100px"/>
														<a href="">修改个人图像</a>
													</div>
												</div>
												 <div class="span3" style="margin-left:70px;margin-top:30px">
													<div class="control-group">
														<div>姓名<input type="text" class="span2" id="input01" name="contact.name" value="${contact.name}"></div>															
													</div>
													<div class="control-group">
														<div>公司<input type="text" class="span2" id="input01"  name="contact.company" value="${contact.company}"></div>
													</div>
													<div class="control-group">
														<div>职位<input type="text" class="span2" id="input01" name="contact.title" value="${contact.title}"></div>
													</div>
												</div>
												<div style="float:right;margin-right:30px">
													<a class="btn btn-danger" id = "del1" style = "cursor:pointer"><i class="icon-trash icon-white" ></i>删除此联系人</a>															
												</div>
												<div class = "modal hide " id="mymodal1" style="width:200px;position:absolute;z-index:1;margin-left:120px">
													<div class = "modal-header">
														<input type="button" value="x" style = 'color:black' id="mydel1"  class = "close" data-dismiss = "modal"/>
														<h3>删除联系人</h3>
													</div>
													<div class = "modal-body" style = "text-align:center;height:20px;margin-top:10px">
														<div >你确定要删除联系人？</div>		
													</div>
													<div class = "modal-footer">
														<a href="<%=basePath%>contact/delContact.action?id=${contact.id}" class = "btn btn-primary"   >是</a>
														<a href="" class = "btn" data-dismiss = "modal" >否</a>
													</div>
												</div>											
											</div><hr>					
										<div style="margin-bottom:20px" class="mediv">
											<label class="control-label" for="input01">手机</label>
										<c:forEach items="${contact.phoneSet}" var="phone">																											
											<div class="trash" id="mytrash1" style="margin-left:140px;margin-top:5px">
												<input type="text" style="width:210px;margin-left:20px" class="myphone" name="tel"  value="${phone.num}">
												<input type="hidden" name="telid" value="${phone.id}">
												<select class="span1" name="teltype">
															<option value="${phone.type}">${phone.type}</option>
															<option value="个人">个人</option>
															<option value="工作">工作</option>
															<option value="家庭">家庭</option>
															<option value="其他">其他</option>
												 </select>
											 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash" onClick="del('mytrash1')"> <i class="icon-trash"></i></a> </span> 
											</div>
										</c:forEach>
										<div class="controls" ><a href="javaScript:;" class="add" >点击添加</a></div>															
									</div>				
									<div style="margin-bottom:20px" class="mediv2">
										<label class="control-label" for="input01">邮箱</label>
										<c:forEach items="${contact.emailSet}" var="email">	
											<div  class="trash" id="mytrash2" style="margin-left:140px;margin-top:5px">
												<input type="text" style="width:210px;margin-left:20px" id="input01" class="myemail" name="email" value="${email.email}">
												<input type="hidden" name="emailid" value="${email.id}">
												<select style="width:85px" name="emailtype">
															<option value="${email.type}">${email.type}</option>
															<option value="163邮箱">163邮箱</option>
															<option value="139邮箱">139邮箱</option>
															<option value="qq邮箱">qq邮箱</option>
												</select>
											 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash" onClick="del('mytrash2')"> <i class="icon-trash"></i></a></span> 
											</div>
										</c:forEach>
										<div class="controls" ><a href="javaScript:;" class="add2" >点击添加</a></div>
									</div>
									<div style="margin-bottom:20px"  class="mediv3">
										<label class="control-label" for="input01">地址</label>
										<c:forEach items="${contact.addressSet}" var="address" >	
											<div class="trash" id="mytrash3" style="margin-left:140px;margin-top:5px">
												<input type="text" style="width:210px;margin-left:20px" id="input01" class="myaddress" name="address" value="${address.address}">
												<input type="hidden" name="addressid" value="${address.id}">
												<select class="span1" name="addresstype">
															<option value="${address.type}">${address.type}</option>
															<option value="家庭">家庭</option>
															<option value="工作">工作</option>
															<option value="其他">其他</option>
												</select>
											 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash" onClick="del('mytrash3')"> <i class="icon-trash"></i></a> </span> 
											</div>
										</c:forEach>
										<div class="controls" ><a href="javaScript:;" class="add3" >点击添加</a></div>
									</div>
									<hr>
									<div class="control-group">
											<label class="control-label" for="input01">主页</label>
											<div class="controls">
												<input type="text" name="contact.mainpage" class="span4" name="contact.mainpage" value="${contact.mainpage}" id="input01">
												<p class="help-block">http://www.xxx.com</p>
											</div>
									</div>
										<div class="control-group">
											<div style="margin-left:115px">设置联系人可见性:</div>
											<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="all" checked="checked" class="mylook3">对所有人可见</div>
											<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="me" class="mylook3">仅自己可见</div>
											<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="meandgroup" class="mylook1">我，和这个小组可见</div>														
											<div style="margin-left:200px;margin-top:5px;display:none" class="look1">	
												<select  style="margin-left:10px;width:100px;" name="groupview">
													<option value="${contact.groupview}">${contact.groupview}</option>
													<c:forEach items="${grouplist}" var="group">
														<option value="${group.name}">${group.name}</option>
													</c:forEach>
												</select>
											</div>
											<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="allandother" class="mylook2">我，和这些人可见</div>														
											<div style="margin-left:200px;margin-top:5px;display:none" class="look2">	
												<select  style="margin-left:10px;width:100px" name="personview">
													<option value="${contact.personview}">${contact.personview}</option>
													<c:forEach items="${list}" var="con">
														<option value="${con.name}">${con.name}</option>
													</c:forEach>
												</select>
											</div>
										</div>
										
									
										<div class="form-actions">
											<button type="submit" class="btn btn-primary">保存</button>
											<button class="btn" onclick="location.back()">返回</button>
									  </div>
										</fieldset>
								</form>
						
					</c:when>
					<c:otherwise>					
						<form class="form-horizontal" action="<%=basePath%>contact/updateContact.action?id=${contact.id}" method="post">
										<fieldset>
										<div class="row" style="border-radius: 3px 3px 0 0">
											<div class="span1" style="margin-top:30px;margin-left:50px">
												
											</div>					
											 <div class="span1">
												<div style="margin-top:30px;border:1px  solid #dddddd;width:80px;height:100px;margin-left:20px">
													<img  src="<%=basePath %>img/2.jpg" style="width:80px;height:100px"/>
													<a href="">修改公司图像</a>
												</div>
											</div>
											 <div class="span3" style="margin-left:70px;margin-top:30px">												
												<div class="control-group">
													<div style="margin-top:20px">公司名</div>
													<div style="margin-top:20px"><input type="text" name="contact.name" class="span2" id="input01" value="${contact.name}"></div>
												</div>
												
											</div>
											<div style="float:right;margin-right:30px">
												<a class="btn btn-danger" id = "del2" style = "cursor:pointer"><i class="icon-trash icon-white" ></i>删除此联系人</a>															
											</div>
											<div class = "modal hide " id="mymodal12"  style="width:200px;position:absolute;z-index:1;margin-left:120px">
												<div class = "modal-header">
													<input type="button" value="x" style = 'color:black' id="mydel2" class = "close" data-dismiss = "modal"/>
													<h3>删除联系人</h3>
												</div>
												<div class = "modal-body" style = "text-align:center;height:20px;margin-top:10px">
													<div >你确定要删除联系人？</div>		
												</div>
												<div class = "modal-footer">
													<a href="<%=basePath%>contact/delContact.action?id=${contact.id}" class = "btn btn-primary"   >是</a>
													<a href="" class = "btn" data-dismiss = "modal" >否</a>
												</div>
											</div>												
										</div><hr>
										<div style="margin-bottom:20px" class="mediv">
											<label class="control-label" for="input01">手机</label>
											<c:forEach items="${contact.phoneSet}" var="phone">																											
												<div class="trash" id="mytrash1" style="margin-left:140px;margin-top:5px">
													<input type="text" style="width:210px;margin-left:20px" class="myphone" name="tel" value="${phone.num}">
													<input type="hidden" name="telid" value="${phone.id}">
													<select class="span1" name="teltype">
															<option value="${phone.type}">${phone.type}</option>
															<option value="个人">个人</option>
															<option value="工作">工作</option>
															<option value="家庭">家庭</option>
															<option value="其他">其他</option>
													</select>
												 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash" onClick="del('mytrash1')"> <i class="icon-trash"></i></a> </span> 
												</div>
											</c:forEach>
										<div class="controls" ><a href="javaScript:;" class="add" >点击添加</a></div>															
									</div>				
									<div style="margin-bottom:20px" class="mediv2">
										<label class="control-label" for="input01">邮箱</label>
										<c:forEach items="${contact.emailSet}" var="email">	
											<div  class="trash" id="mytrash2" style="margin-left:140px;margin-top:5px">
												<input type="text" style="width:210px;margin-left:20px" id="input01" class="myemail" name="email" value="${email.email}">
												<input type="hidden" name="emailid" value="${email.id}">
												<select style="width:85px" name="emailtype">
														<option value="${email.type}">${email.type}</option>
														<option value="163邮箱">163邮箱</option>
														<option value="139邮箱">139邮箱</option>
														<option value="qq邮箱">qq邮箱</option>
												</select>
											 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash" onClick="del('mytrash2')"> <i class="icon-trash"></i></a></span> 
											</div>
										</c:forEach>
										<div class="controls" ><a href="javaScript:;" class="add2" >点击添加</a></div>
									</div>
									<div style="margin-bottom:20px"  class="mediv3">
										<label class="control-label" for="input01">地址</label>
										<c:forEach items="${contact.addressSet}" var="address" >	
											<div class="trash" id="mytrash3" style="margin-left:140px;margin-top:5px">
												<input type="text" style="width:210px;margin-left:20px" id="input01" class="myaddress" name="address" value="${address.address}">
												<input type="hidden" name="addressid" value="${address.id}">
												<select class="span1" name="addresstype">
															<option value="${address.type}">${address.type}</option>
															<option value="家庭">家庭</option>
															<option value="工作">工作</option>
															<option value="其他">其他</option>
												</select>
											 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash" onClick="del('mytrash3')"> <i class="icon-trash"></i></a> </span> 
											</div>
										</c:forEach>
										<div class="controls" ><a href="javaScript:;" class="add3" >点击添加</a></div>
									</div>
									<hr>
										<div class="control-group">
											<label class="control-label" for="input01">主页</label>
											<div class="controls">
												<input type="text" name="contact.mainpage" class="span4" name="contact.mainpage" value="${contact.mainpage}" id="input01">
												<p class="help-block">http://www.xxx.com</p>
											</div>
										</div>
										<div class="control-group">
											<div style="margin-left:115px">设置联系人可见性:</div>
											<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="all" checked="checked" class="mylook3">对所有人可见</div>
											<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="me" class="mylook3">仅自己可见</div>
											<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="meandgroup" class="mylook1">我，和这个小组可见</div>														
											<div style="margin-left:200px;margin-top:5px;display:none" class="look1">	
												<select  style="margin-left:10px;width:100px;" name="groupview">
													<option value="${contact.groupview}">${contact.groupview}</option>
													<c:forEach items="${grouplist}" var="group">
														<option value="${group.name}">${group.name}</option>
													</c:forEach>
												</select>
											</div>
											<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="meandother" class="mylook2">我，和这些人可见</div>														
											<div style="margin-left:200px;margin-top:5px;display:none" class="look2">	
												<select  style="margin-left:10px;width:100px" name="personview">
													<option value="${contact.personview}">${contact.personview}</option>
													<c:forEach items="${list}" var="con">
														<option value="${con.name}">${con.name}</option>
													</c:forEach>
												</select>
											</div>
										</div>
									<div class="form-actions">
										<button type="submit" class="btn btn-primary">保存</button>
										<button class="btn" onclick="location.back()">返回</button>
								  	</div>
									</fieldset>
								</form>
							</c:otherwise>	
						</c:choose>
						
					</div>
				</div>
			</div>		
		</div>
	</div>
</div>	
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/2.0.3/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#del1").click(function(){
				//alert("hehe");
				$("#mymodal1").show("slow");
			});
			$("#mydel1").click(function(){
				//alert("hehe");
				$("#mymodal1").hide("slow");
			});
			
			$("#del2").click(function(){
				//alert("hehe");
				$("#mymodal12").show("slow");
			});
			$("#mydel2").click(function(){
				//alert("hehe");
				$("#mymodal12").hide("slow");
			});
			var tt=$("#myselect").val();
			//alert(tt);	
			//select选择
			if(tt="all"){
				$("input[value='all']").attr("checked", true);
			}
			if(tt="me"){
				$("input[value='me']").attr("checked", true);
			}
			if(tt="meandgroup"){
				$("input[value='meandgroup']").attr("checked", true);
				//$(".mylook1").attr("checked", true);
				$(".look1").show();
				$(".look2").hide();
				
			}
			if(tt="allandother"){
				$("input[value='allandother']").attr("checked", true);
				$(".look2").show();
				$(".look1").hide();
			}
						
			
				//设置转化条选中时的颜色
				$("#myli1 a").css("color","white");
				$("#myli1 a").addClass("btn-inverse");//默认显示颜色
				$("#myli1").click(function(){
					$("#myli1 a").css("color","white");
					$("#myli1 a").addClass("btn-inverse");
					$("#myli2 a").css("color","black");
					$("#myli2 a").removeClass("btn-inverse");
				});
				$("#myli2").click(function(){
					$("#myli2 a").css("color","white");
					$("#myli2 a").addClass("btn-inverse");
					$("#myli1 a").css("color","black");
					$("#myli1 a").removeClass("btn-inverse");
				});
				
				/*select中可见性设置问题：*/
				$(".mylook1").click(function(){
					$(".look2").hide();
					$(".look1").show(); 
				});
				$(".mylook2").click(function(){
					$(".look1").hide();
					$(".look2").show();
				});
				$(".mylook3").click(function(){
					$(".look2").hide();
					$(".look1").hide();
				}); 
				
				
		
		
		
			/*添加多个电话*/
			var m = 1;
				$(".myphone").live("keyup", function(){  
					var name = $(this).val();
					//alert(name.length);
					//alert("keyup");  
					//当文本框有内容时
					if(name.length!=0 && m==1){
						$(".mediv").append($("<div class='controls' ><a href='javaScript:;' class='add' >点击添加</a></div>"));
						m=0;									
					}
					
				});
				//当添加被点击时
				$(".add").live("click",function(){
					$(".add").remove();
					m=1;
					//alert("hehe");
					$(".mediv").append($("<div class='controls' style='margin-top:5px' ><input type='text' style='width:210px'name='tel' class='myphone'><select class='span1' name='teltype'><option value='个人'>个人</option><option value='工作'>工作</option><option value='家庭'>家庭</option><option value='其他'>其他</option></select><span style='margin-left:5px;pading-top:5px'> <a href='javaScript:;'  class='mytrash' onClick='del('v')'> <i class='icon-trash'></i></a>  </span> </div>"));
				});
				
				$(".mytrash").live("click",function(){
					var r=$(this).parent().parent().attr("id");
					//alert(r);
					$(this).parent().parent().empty();				
				});
				
				
				
				/*添加多个邮箱*/
				var  b=1;
				$(".myemail").live("keyup",function(){  
					var nam = $(this).val();
					 
					//当文本框有内容时
					if(nam.length!=0 && b==1 ){
						$(".mediv2").append($("<div class='controls'><a href='javaScript:;' class='add2' >点击添加</a></div>"));
						b=0;
					}
					
				});
				
				//当添加被点击时
				$(".add2").live("click",function(){
					$(".add2").remove();
					b=1;
					$(".mediv2").append($("<div class='controls' style='margin-top:5px' ><input type='text' style='width:210px' name='email' class='myemail'><select style='width:85px;margin-left:5px' name='emailtype'><option value='163邮箱'>163邮箱</option><option value='139邮箱'>139邮箱</option><option value='qq邮箱'>qq邮箱</option></select><a href='javaScript:;'  class='mytrash'> <i class='icon-trash'></i></a> </span> </div>"));
				});
				
				
				
				/*添加多个地址*/
				var e=1;
				$(".myaddress").live("keyup",function(){  
					var nam = $(this).val();					  
					//当文本框有内容时
					if(nam.length!=0 && e==1){
						$(".mediv3").append($("<div class='controls'><a href='javaScript:;' class='add3' >点击添加</a></div>"));
						e=0;						
						}				
				});
				
				//当添加被点击时
				$(".add3").live("click",function(){
					$(".add3").remove();
					e=1;
					$(".mediv3").append($("<div class='controls' style='margin-top:5px'  id='trash'><input type='text' name='address' style='width:210px' class='myaddress'><select class='span1' name='addresstype'><option value='家庭'>家庭</option><option value='工作'>工作</option><option value='其他'>其他</option></select><span style='margin-left:5px;pading-top:5px'> <a href='javaScript:;'  class='mytrash'> <i class='icon-trash'></i></a> </span> </div>"));
				});			
		});
	</script>
</body>
</html>